<h3>注册</h3>
<form (ngSubmit)="submit()" [formGroup]="form" nz-form role="form">
  <nz-alert *ngIf="error" [nzMessage]="error" [nzShowIcon]="true" [nzType]="'error'" class="mb-lg"></nz-alert>
  <nz-form-item>
    <nz-form-control [nzErrorTip]="mailErrorTip">
      <nz-input-group nzAddonBeforeIcon="user" nzSize="large">
        <input formControlName="mail" nz-input placeholder="Email"/>
      </nz-input-group>
      <ng-template #mailErrorTip let-i>
        <ng-container *ngIf="i.errors?.required">请输入邮箱地址！</ng-container>
        <ng-container *ngIf="i.errors?.email">邮箱地址格式错误！</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzErrorTip]="'请输入密码！'">
      <nz-input-group
        [(nzVisible)]="visible"
        [nzOverlayStyle]="{ 'width.px': 240 }"
        [nzPopoverContent]="pwdCdkTpl"
        nz-popover
        nzAddonBeforeIcon="lock"
        nzOverlayClassName="register-password-cdk"
        nzPopoverPlacement="right"
        nzPopoverTrigger="focus"
        nzSize="large"
      >
        <input formControlName="password" nz-input placeholder="Password" type="password"/>
      </nz-input-group>
      <ng-template #pwdCdkTpl>
        <div style="padding: 4px 0;">
          <ng-container [ngSwitch]="status">
            <div *ngSwitchCase="'ok'" class="success">强度：强</div>
            <div *ngSwitchCase="'pass'" class="warning">强度：中</div>
            <div *ngSwitchDefault class="error">强度：太短</div>
          </ng-container>
          <div class="progress-{{ status }}">
            <nz-progress
              [nzPercent]="progress"
              [nzShowInfo]="false"
              [nzStatus]="passwordProgressMap[status]"
              [nzStrokeWidth]="6"
            ></nz-progress>
          </div>
          <p class="mt-sm">请至少输入 6 个字符。请不要使用容易被猜到的密码。</p>
        </div>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzErrorTip]="confirmErrorTip">
      <nz-input-group nzAddonBeforeIcon="lock" nzSize="large">
        <input formControlName="confirm" nz-input placeholder="Confirm Password" type="password"/>
      </nz-input-group>
      <ng-template #confirmErrorTip let-i>
        <ng-container *ngIf="i.errors?.required">请确认密码！</ng-container>
        <ng-container *ngIf="i.errors?.equar">两次输入的密码不匹配!</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzErrorTip]="mobileErrorTip">
      <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate" nzSize="large">
        <ng-template #addOnBeforeTemplate>
          <nz-select formControlName="mobilePrefix" style="width: 100px;">
            <nz-option [nzLabel]="'+86'" [nzValue]="'+86'"></nz-option>
            <nz-option [nzLabel]="'+87'" [nzValue]="'+87'"></nz-option>
          </nz-select>
        </ng-template>
        <input formControlName="mobile" nz-input placeholder="Phone number"/>
      </nz-input-group>
      <ng-template #mobileErrorTip let-i>
        <ng-container *ngIf="i.errors?.required">请输入手机号！</ng-container>
        <ng-container *ngIf="i.errors?.pattern">手机号格式错误！</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzErrorTip]="'请输入验证码！'">
      <nz-row [nzGutter]="8">
        <nz-col [nzSpan]="16">
          <nz-input-group nzAddonBeforeIcon="mail" nzSize="large">
            <input formControlName="captcha" nz-input placeholder="Captcha"/>
          </nz-input-group>
        </nz-col>
        <nz-col [nzSpan]="8">
          <button
            (click)="getCaptcha()"
            [disabled]="count"
            [nzLoading]="http.loading"
            nz-button
            nzBlock
            nzSize="large"
            type="button"
          >
            {{ count ? count + 's' : ('获取验证码') }}
          </button>
        </nz-col>
      </nz-row>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <button [nzLoading]="http.loading" class="submit" nz-button nzSize="large" nzType="primary" type="submit">
      注册
    </button>
    <a class="login" routerLink="/passport/login">使用已有账户登录</a>
  </nz-form-item>
</form>
